<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="70%" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="110px" label-position="top">
            <el-main class="nopadding">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="add">新增物料</el-button>
                <sc-form-table ref="table" v-model="form.material_data" :addTemplate="addTemplate" placeholder="暂无数据" height="400" hideAdd>
                    <el-table-column prop="sku" label="物料SKU" align="center"></el-table-column>
                    <el-table-column prop="apply_name" label="供应商" align="center"></el-table-column>
                    <el-table-column prop="category_name" label="物料分类" align="center"></el-table-column>
                    <el-table-column prop="material_name" label="料种" align="center"></el-table-column>
                    <el-table-column prop="color_number" label="色号" align="center"></el-table-column>
                    <el-table-column prop="colour" label="颜色" align="center"></el-table-column>
                    <el-table-column prop="weight" label="数量" align="center">
                        <template #default="scope">
                            <el-input v-model="scope.row.weight" placeholder="请输入数量"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="unit_name" label="单位" align="center"></el-table-column>
                    <el-table-column prop="remark" label="备注" align="center">
                        <template #default="scope">
                            <el-input v-model="scope.row.remark" placeholder="请输入备注"></el-input>
                        </template>
                    </el-table-column>
                </sc-form-table>
            </el-main>
        </el-form>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" @click="submit">确定</el-button>
		</template>
        <el-dialog v-model="dialogVisible" width="500" :before-close="handleClose" align-center draggable>
            <div>{{message}}</div>
            <div>是否需要继续下单?</div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary"  @click="submits(2)">确定否</el-button>
                    <el-button type="primary"  @click="submits(1)">确定是</el-button>
                </div>
            </template>
        </el-dialog>
	</el-dialog>
    <check-marter v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></check-marter>
</template>

<script>
import checkMarter from '../checkMarter.vue';
export default {
  components: { checkMarter },
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '选择工序',
				edit: '版料采购单',
				show: '查看'
			},
            dialog: {
				save: false,
			},
			visible: false,
			isSaveing: false,
            dialogVisible:false,
            form: {
                order_no:"",
                is_place_order:"",
                material_data:[], //辅料信息
            },
            message:"",
		}
	},
	mounted() {
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
        setData(data) {
            this.form.order_no = data.order_no
            let array = []
            data.marterial.map(item=>{
                array.push({
                    material_id:item.material_id,
                    material_spec_code:item.material_code,
                    cate_id:item.cate_id,
                    weight:item.weight,
                    unit:item.material.material.unit,
                    unit_name:item.unit,
                    remark:item.remark,

                    sku:item.material.material.sku,
                    apply_name:item.material.material.referred_as,
                    material_name:item.material_name,
                    category_name:item.cate_name,
                    color_number:item.material.color_number,
                    colour:item.material.colour,
                })
            })
            this.form.material_data = array
		},
        // 打开弹窗
        add() {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("over");
			});
		},
        handleSuccess(data) {
            let a = []
            data.map((item)=>{
                a.push({
                    material_id:item.material.material_id,
                    material_spec_code:item.spec_code,
                    weight:"",
                    cate_id:item.material.category_id,
                    unit:item.material.unit,
                    unit_name:item.material.unit_name,
                    remark:"",

                    sku:item.material.sku,
                    apply_name:item.material.referred_as,
                    category_name:item.material.category_name,
                    material_name:item.material.material_name,
                    color_number:item.color_number,
                    colour:item.colour,
                })
            })
            let existingIds = this.form.material_data.map(item => item.material_spec_code);
            for(let i = a.length - 1; i >= 0; i--){
                if(existingIds.includes(a[i].material_spec_code)){
                    a.splice(i, 1);
                }
            }
            this.form.material_data = [...this.form.material_data,...a]
        },
        //表单提交方法
        submit(){
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    var res  = [];
                    this.form.is_place_order = 0
                    res = await this.$API.develop.edition.templatePurchase.post(this.form);
                    this.isSaveing = false;
                    if(res.code == 1){
                        this.$emit('success', this.form, this.mode)
                        this.visible = false;
                        this.$message.success("操作成功")
                    }else if(res.code==2){
                        this.dialogVisible = true
                        this.message = res.message
                    }else{
                        this.$alert(res.message, "提示", {type: 'error'})

                    }
                }else{
                    return false;
                }
            })
        },
        submits(e){
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    var res  = [];
                    this.form.is_place_order = e
                    res = await this.$API.develop.edition.templatePurchase.post(this.form);
                    this.isSaveing = false;
                    if(res.code == 1){
                        this.$emit('success', this.form, this.mode)
                        this.visible = false;
                        this.$message.success("操作成功")
                    }else{
                        this.$alert(res.message, "提示", {type: 'error'})
                    }
                }else{
                    return false;
                }
            })
        },
	}
}
</script>

<style></style>
